<template>
  <div class="pageBox">
    <head-component title="商品列表"></head-component>

    <div class="content">
      <div class="exchangeBox">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="goodsList flex-between">
            <div
              class="goodsItem"
              v-for="item in list"
              :key="item.id"
              @click="goGoodsDetails(item)"
            >
              <img class="goodsIcon" :src="item.thumbUrl" alt="" />
              <div class="goodsTitle oneHidden">{{ item.title }}</div>
              <div class="goodsPrice flex-row">
                <p>¥{{ item.marketprice }}</p>
                <del>¥{{ item.productprice }}</del>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import router from "../../router";
import { post } from "../../untils/request";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    const cateId = ref(
      router.currentRoute.value.query.cateId
        ? router.currentRoute.value.query.cateId
        : ""
    ); // 广告位商品分类id
    const genre = ref(
      router.currentRoute.value.query.genre
        ? router.currentRoute.value.query.genre
        : ""
    ); // 首页推荐商品类型
    const isrecommand = ref(
      router.currentRoute.value.query.isrecommand
        ? router.currentRoute.value.query.isrecommand
        : ""
    ); // 是否首页推荐

    const page = ref(1);
    const lastId = ref(0);
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);

    function onLoad() {
      post("/portal/Shop", {
        module: "Goods",
        interface: "2000",
        data: {
          lastId: lastId.value,
          page: page.value,
          sort: "",
          cateId: cateId.value,
          genre: genre.value,
          isrecommand: isrecommand.value,
           keyword: "",
        },
      }).then((res) => {
        let datas = res.data.list;
        if (datas) {
          list.value = list.value.concat(datas);
          loading.value = false;
        }
        lastId.value = res.data.lastId;
        page.value = res.data.currentPage + 1;
        if (page.value > res.data.lastPage) {
          loading.value = false;
          finished.value = true;
        }
      });
    }
    function goGoodsDetails(param) {
      router.push({
        path: "/goodsDetails",
        query: {
          id: param.id,
        },
      });
    }
    return {
      cateId,
      genre,
      isrecommand,
      page,
      lastId,
      list,
      loading,
      finished,
      onLoad,
      goGoodsDetails,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: 88px;
  .content {
    padding: 0 30px;
    .exchangeBox {
      margin-top: 25px;
    }
    .goodsList {
      flex-wrap: wrap;
      justify-content: flex-start;
      .goodsItem {
        width: 48%;
        border-radius: 16px;
        background: #ffffff;
        padding-bottom: 16px;
        position: relative;
        margin: 0 6px 20px;
        .goodsIcon {
          width: 100%;
          height: 260px;
          border-radius: 12px 12px 0px 0px;
        }
        .hot {
          width: 64px;
          height: 30px;
          position: absolute;
          left: 0;
          top: 140px;
          z-index: 1;
        }
        .goodsTitle {
          font-size: 28px;
          font-weight: 500;
          color: #333333;
          padding: 10px 0 0 12px;
          width: 100%;
        }
        .goodsPrice {
          padding: 9px 0 0 12px;
          align-items: flex-end;
          p {
            font-size: 36px;
            font-weight: 500;
            color: #e00b12;
          }
          del {
            font-size: 22px;
            font-weight: 400;
            color: #b3b3b3;
            padding-bottom: 4px;
          }
        }
      }
    }
  }
}
</style>